<? if (!defined("BASEPATH")) exit("No direct script access allowed"); ?>

<div id="fb-root"></div>
<script type="text/javascript">
	window.fbAsyncInit = function() {
		FB.init({
			appId   : '<?=$this->config->item("APP_ID")?>',
			channelUrl : '//<?=site_url()?>/channel.html', 
			oauth   : true,
			status  : true, // check login status
			cookie  : true, // enable cookies to allow the server to access the session
			xfbml   : true // parse XFBML
		});
	  };

	function fb_login(){
		FB.login(function(response) {

			if (response.authResponse) {
				//console.log('Welcome!  Fetching your information.... ');
				//console.log(response); // dump complete info
				access_token = response.authResponse.accessToken; //get access token
				user_id = response.authResponse.userID; //get FB UID

				FB.api('/me', function(response) {
					user_email = response.email; //get user email
					// you can store this data into your database             
					$.ajax({type: 'POST', url: '<?=site_url()?>facebook_login', data:'email=' + user_email, beforeSend: function(xhr) {} }).
						always(function() { /*$('#modal').unmask();*/ location.href='<?=site_url()?>';});
				});

			} else {
				//user hit cancel button
				//console.log('User cancelled login or did not fully authorize.');

			}
		}, {
			scope: 'email'
		});
	}
	(function() {
		var e = document.createElement('script');
		e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
		e.async = true;
		document.getElementById('fb-root').appendChild(e);
	}());
</script>

<script type="text/javascript">

	Ext.onReady(function() {
		var form = new Ext.form.FormPanel({
			baseCls: 'x-plain',
			layout:'absolute',
			style: {height: '70px'},
			standardSubmit: true,
			defaultType: 'textfield',

			keys: [{
				key: [Ext.EventObject.ENTER], handler: function() {
					form.getForm().submit();
				}
			}],

			items: [{
					x: 0,
					y: 5,
					xtype:'label',
					text: '<?=$this->db->escape_str($this->lang->line("E-MAIL_ADDRESS"))?>:'
			},{
					x: 90,
					y: 0,
					name: 'email',
					id: 'email',
					allowBlank:false,
					listeners: {
						afterrender: function(field) {
							field.focus(false, 500);
						}
					},
					anchor:'100%'
			},{
					x: 0,
					y: 35,
					xtype:'label',
					text: '<?=$this->db->escape_str($this->lang->line("PASSWORD"))?>:',
			},{
					x: 90,
					y: 30,
					name: 'password',
					allowBlank:false,
					anchor: '100%',
					inputType: 'password'
			}]
		});

		var window = new Ext.Window({
			title: '<?=$this->db->escape_str($this->lang->line("LOGIN"))?>',
			width: 410,
			closable: false,
			iconCls: 'user',
			height:183,
			layout: 'fit',
			plain:true,
			bodyStyle:'padding:5px;',
			buttonAlign:'right',
			items: [
				form,
				new Ext.BoxComponent({
					html: '<?
						echo	"<div onclick=\"location.href=\'".site_url()."openid/google\';\" style=\"float: left; cursor:pointer; background-image:url(".MEDIA."icon/google/web_layer_0003s_0004_bg.png); width:190px; height: 36px;\">&nbsp;&nbsp;<img src=\"".MEDIA."icon/google/web_layer_0003s_0000_google.png\" alt=\"\"  style=\"vertical-align: middle;\" /><img src=\"".MEDIA."icon/google/web_layer_0003s_0001_line.png\" alt=\"\" style=\"vertical-align: middle;\" /><img src=\"".MEDIA."icon/google/web_layer_0003s_0002_line.png\" alt=\"\" style=\"vertical-align: middle;\" />&nbsp;&nbsp;<img src=\"".MEDIA."icon/google/web_layer_0003s_0003_Sign-in-with-Google+.png\" alt=\"\" style=\"vertical-align: middle;\" /></div>";
							
						echo	"<div onclick=\"fb_login(); return false;\" style=\"float: right; cursor:pointer; background-image:url(".MEDIA."icon/facebook/web_layer_0001s_0004_bg.png); width:190px; height: 36px;\">&nbsp;&nbsp;<img src=\"".MEDIA."icon/facebook/web_layer_0001s_0000_facebook.png\" alt=\"\" style=\"margin-right:10px; vertical-align: middle;\" /><img src=\"".MEDIA."icon/facebook/web_layer_0001s_0001_line.png\" alt=\"\" style=\"vertical-align: middle;\" /><img src=\"".MEDIA."icon/facebook/web_layer_0001s_0002_line.png\" alt=\"\" style=\"vertical-align: middle;\" />&nbsp;&nbsp;<img src=\"".MEDIA."icon/facebook/web_layer_0001s_0003_Sign-in-with-Facebook.png\" alt=\"\" style=\"vertical-align: middle;\" /></div>";
						?>'
				})
			],
			buttons: [{
					text: '<?=$this->db->escape_str($this->lang->line("LOGIN"))?>',
					handler: login
			}, {
					text: '<?=$this->db->escape_str($this->lang->line("RESET"))?>',
					handler: function() {
						form.getForm().reset();
					}
			}]
		});

		function login() {
			if (form.getForm().isValid()) {
				form.getForm().submit();
			} else{
				Ext.Msg.alert('<?=$this->db->escape_str($this->lang->line("ERROR"))?>', '<?=$this->db->escape_str($this->lang->line("THIS_FIELD_IS_REQUIRED"))?>');
			}
		};

		window.show();
	});

</script>